<template>
  <div id="adress" style="position: relative">
    <div >
      <div class="search-buttom">
        <el-input
          v-model="search"
          placeholder="请输入内容"
          @input="stateSearch"
          @focus="searchResultView = true"
        ></el-input>
          <!-- <el-button type="primary" plain>取消</el-button> -->
          <span v-show="searchResultView" @click="searchResultView = false">取消</span>
      </div>
      <div class="seach-value" v-show="searchResultView">
        <div
          v-for="(item, index) in searchResult"
          :key="index"
          class="seach-value-text"
          @click="searchClick(item)"
        >
          
          <div class="seach-value-aderss">
            <p style="margin:0 0 10px 0;"><i class="el-icon-search" style="margin-right: 5px"></i>{{ item.title }}</p>
            <span style=" font-size: 12px;margin-top:10px;margin-left:18px">{{
              item.address
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <p style="position: absolute;z-index: 999;"><label>经纬度</label><input id='laLd' type='text' disabled value='' style="width: 200px;" /></p> -->
    <!-- <p style="position: absolute;z-index: 999;top: 25px;"><label style="margin-left: 16px;">地址</label><input id='address' type='text' disabled value='' style="width: 200px;" /></p> -->
    <div id="container" style="height: 45%;margin-top:10px"></div>
    <div class="move-search">
      <ul>
        <li
          v-for="(item, index) in moveResult"
          :key="index"
          class="move-search-item"
          @click="moveClick(item)"
        >
         <div class="move-search-item-adress"> {{ item.title }}</div><span style="margin-top:10px;font-size: 12px;color: gray;">{{ item.address }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<!-- <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_MAP_KEY"></script> -->
<script>

import TencentMap from "./tencentMap";
export default {
  name: "QqMap",
  data() {
    return {
      search: null,
      map: null,
      searchResultView: false, //搜索结果框的显隐
      searchResult: null, //搜索答案的结果
      marker: null, //标记
      setTime: true, //设置定时事件
      moveResult: null, //拖动搜索结果
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // var center = new TMap.LatLng(24.635979, 118.07431);
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      // this.map = new TMap.Map(document.getElementById("container"), {
      //   center: center, //设置地图中心点坐标
      //   zoom: 17.2, //设置地图缩放级别
      //   pitch: 43.5, //设置俯仰角
      //   rotation: 45, //设置地图旋转角度
      // });
      var geocoder = new TMap.service.Geocoder();
      var suggest = new TMap.service.Suggestion({
        // 新建一个关键字输入提示类
        pageSize: 10, // 返回结果每页条目数
      });
      this.Map = new TencentMap("container", [24.575891, 118.097435], 15);
      this.Map.registerCallBack(this.mapCallBack);
      this.Map.initDomMap();
      this.map = this.Map.map;
      const _this = this;
      //初始图标
      this.setMap(24.575891, 118.097435);
      //初始化搜索
      geocoder
        .getAddress({
          location: new TMap.LatLng(24.575891, 118.097435),
        }) // 将给定的坐标位置转换为地址
        .then((result) => {
          // document.getElementById('address').value = result.result.address;
          // 搜索地址
          suggest
            .getSuggestions({
              keyword: result.result.address,
              location: _this.map.getCenter(),
            })
            .then((result) => {
              _this.moveResult = result.data;
            })
            .catch((error) => {
              console.log(error);
            });
        });

      this.map.on("pan", function () {
        let evt = _this.map.getCenter().toString().split(",");
        //点击时 使地图中心点跟着移动
        let lat = evt[0];
        let lnt = evt[1];
        // document.getElementById('laLd').value = lat + ',' + lnt;
        // if (_this.marker) {
        //   _this.marker.setMap(null);
        //   _this.marker = null;
        // }
        //修改图标位置
        _this.alterMap("demo", lat, lnt);
        //显示当前中心点的位置
        var location = new TMap.LatLng(lat, lnt);
        if (_this.setTime) {
          geocoder
            .getAddress({
              location: location,
            }) // 将给定的坐标位置转换为地址
            .then((result) => {
              // document.getElementById('address').value = result.result.address;
              // 搜索地址
              _this.setTime = false;
              suggest
                .getSuggestions({
                  keyword: result.result.formatted_addresses.recommend,
                  location: _this.map.getCenter(),
                })
                .then((result1) => {
                  _this.moveResult = result1.data;
                })
                .catch((error) => {
                  console.log(error);
                });

              setTimeout(() => {
                _this.setTime = true;
              }, 500);
            });
        }
      });
    },
    //监听输入文本进行搜索
    stateSearch() {
      var search = new TMap.service.Search({ pageSize: 10 }); // 新建一个地点搜索类
      var suggest = new TMap.service.Suggestion({
        // 新建一个关键字输入提示类
        pageSize: 10, // 返回结果每页条目数
      });
      if (this.search) {
        suggest
          .getSuggestions({
            keyword: this.search,
            location: this.map.getCenter(),
          })
          .then((result) => {
            this.searchResult = result.data;
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        this.searchResult = null;
      }
    },
    //点击确认搜索
    searchClick(item) {
      this.searchResultView = false;
      this.map.setCenter(new TMap.LatLng(item.location.lat, item.location.lng));
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      //创建图标
      this.setMap(item.location.lat, item.location.lng);
      this.search = null;
      this.searchResult = null;
    },
    //确认地址
    moveClick(item) {
      let adress = {
        cityname: item.city,
        latlng: {
          lat:item.location.lat,
          lng:item.location.lng
        },
        poiaddress:item.address,
        poiname:item.title
      }
      this.$emit('callback', adress)
    },
    //创建地图图标
    setMap(lat, lnt) {
      this.marker = new TMap.MultiMarker({
        id: "marker-layer",
        map: this.map,
        styles: {
          marker: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: {
              x: 16,
              y: 32,
            },
            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
          }),
        },
        geometries: [
          {
            id: "demo",
            styleId: "marker",
            position: new TMap.LatLng(lat, lnt),
            properties: {
              title: "marker",
            },
          },
        ],
      });
    },
    //修改地图图标
    alterMap(id, lat, lnt) {
      this.marker.updateGeometries([
        {
          styleId: "marker",
          id: id,
          position: new TMap.LatLng(lat, lnt),
        },
      ]);
    },
  },
};
</script>
<style lang="less">
.el-dialog__wrapper .el-dialog__body {
  padding:  30px 20px !important;
}
.seach-value {
  position: absolute;
  /* width: 626px; */
  width: 100%;
  height: 93%;
  background: #f6f6f6;
  overflow:hidden;
  overflow-y: scroll;
  // border-top: 1px solid #d3d3d3;
  z-index: 999999;
  .seach-value-text {
    margin: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d3d3d3;
    .seach-value-aderss {
      width: 98%;
      margin-left: 5px;
      // display: flex;
      // justify-content: space-between;
      // align-items: center;
    }
  }
}
.move-search {
  height: 300px;
  overflow: hidden;
  overflow-y: scroll;
  .move-search-item {
    list-style-type: none;
    height: 59px;
    padding-top: 6px;
    border-bottom: 1px solid #d3d3d3;
    .move-search-item-adress {
      margin-bottom: 5px;
      
    }
  }
}
.search-buttom {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  span {
    white-space: nowrap;
    font-size: 16px;
    margin-left: 5px;
    color: blue;
  }
}
</style>